// 等待页面资源加载完成立即执行
window.onload = function () {
  let gotoLogin = document.querySelector("#gotoLogin"); //登录
  let gotoRegister = document.querySelector("#gotoRegister"); //注册
  let loginBox = document.querySelector(".form-box .login"); //登录盒子
  let registerBox = document.querySelector(".form-box .register"); //注册盒子
  //给登录和注册盒子注册事件,相互切换
  // 登录盒子点击事件
  gotoLogin.addEventListener("click", function () {
    loginBox.style.display = "block";
    registerBox.style.display = "none";
  });
  // 注册盒点击事件
  gotoRegister.addEventListener("click", function () {
    loginBox.style.display = "none";
    registerBox.style.display = "block";
  });
  // 比如，验证一个用户名和密码
  function test() {
    return {
      fields: {
        username: {
          // 这里username是 input 的name属性值，表示对这个输入框进行验证
          validators: {
            // 添加真正的校验规则
            notEmpty: {
              //不能为空
              message: "用户名不能为空.", // 如果不满足校验规则，则给出这句提示
            },
            stringLength: {
              //检测长度
              min: 2, // 最少2位
              max: 15, // 最多15位
              message: "用户名需要2~15个字符",
            },
          },
        },
        password: {
          validators: {
            notEmpty: {
              message: "密码不能为空",
            },
            stringLength: {
              //检测长度
              min: 6,
              max: 15,
              message: "密码需要6~15个字符",
            },
          },
        },
      },
    };
  }
  // 语法：
  // $('表单').bootstrapValidator(上面的验证函数()).on('success.form.bv', function (e) {}

  // 比如，注册
  $(".register form")
    .bootstrapValidator(test())
    .on("success.form.bv", function (e) {
      e.preventDefault();
      // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
      // 注册逻辑
      // 获取用户输入的账号和密码
      let username = registerBox
        .querySelector('[name="username"]')
        .value.trim();
      let password = registerBox
        .querySelector('[name="password"]')
        .value.trim();
      // 发送Ajax请求完成注册
      axios({
        method: "post",
        url: "/api/register",
        data: {
          username,
          password,
        },
      }).then((res) => {
        // 用提示插件提示一下状态
        toastr.success(res.data.message); // 成功提示
        // 判断条件
        if (res.status == 200 && res.data.code == 0) {
          // 完成后用户名和密码框清空
          registerBox.querySelector('[name="username"]').value = "";
          registerBox.querySelector('[name="password"]').value = "";
          // 调用一次登录框显示.注册框隐藏
          gotoLogin.click();
        }
      });
    });
  $(".login form")
    .bootstrapValidator(test())
    .on("success.form.bv", function (e) {
      // 阻止表单默认跳转
      e.preventDefault();
      // 获取表单
      let username = loginBox.querySelector('[name="username"]').value.trim();
      let password = loginBox.querySelector('[name="password"]').value.trim();
      // 发送Ajax请求
      axios({
        method: "post",
        url: "/api/login",
        data: {
          username,
          password,
        },
      }).then((res) => {
        console.log(res);
        localStorage.setItem("mytoken", res.data.token);
        toastr.success(res.data.message); // 成功提示
        // 判断返回的结果
        if (res.status == 200 && res.data.code == 0) {
          setTimeout(() => {
            location.href = "./index.html";
          }, 1000);
        }
        // 表单清空
        loginBox.querySelector('[name="username"]').value = "";
        loginBox.querySelector('[name="password"]').value = "";
      });
    });
};
